<template>
  <view class="orderList">
    <view class="lineOne">
      <view class="search">
        <u-search
          v-model="keyword"
          @change="$u.throttle(resetList, 500, false)"
          placeholder="输入盘点单号"
          :showAction="false"
          height="26"
        ></u-search>
      </view>
      <filteate :list="options" @submit="handelSubmit"></filteate>
    </view>
    <view class="tabs">
      <u-tabs
        :list="stateList"
        :scrollable="false"
        @change="handleChange"
        :activeStyle="{
          color: '#FD4D00',
        }"
        lineColor="#FD4D00"
        lineWidth="50"
      ></u-tabs>
    </view>
    <view class="list">
      <u-list
        v-if="orderList.length !== 0"
        :height="listHeight.height"
        @scrolltolower="getMore"
      >
        <u-list-item v-for="item in orderList" :key="item.id">
          <countListItem
            @cancel="handleCancel"
            :data="item"
            @detail="goToDetail"
            @check="handleCheck"
          ></countListItem>
        </u-list-item>
      </u-list>
      <emptyList v-else></emptyList>
    </view>
    <view class="img" @click="goToAdd">
      <image class="icon" src="@/static/add.png" mode=""></image>
    </view>
  </view>
</template>

<!-- 盘点单列表 -->
<script setup>
import { ref } from "vue";
import filteate from "@/components/initPopup/filteate.vue";
import countListItem from "@/components/orderList/countListItem.vue";
import emptyList from "@/components/empty/emptyList.vue";
import {
  countOrderList,
  dictDataList,
  countOrderCancel,
  countOrderCheck,
} from "@/api/order";
import { getWmsInvWorkhouseList } from "@/api/index";
import { useListHeight } from "@/hooks/useListHeight.js";
import { useList } from "@/hooks/useList";
const { listHeight } = useListHeight({
  el: ".list",
});
const options = ref([
  {
    name: "盘点日期",
    type: "timeRange",
    value: "createTime",
    initValue: [],
  },
  {
    name: "盘点类型",
    type: "radio",
    value: "stocktakeTypeId",
    options: [],
  },
  {
    name: "盘点仓库",
    type: "radio",
    value: "workhouseId",
    options: [],
  },
]);
const stateList = ref([
  {
    name: "全部",
    value: "",
  },
  {
    name: "待审核",
    value: 0,
  },
  {
    name: "已审核",
    value: 1,
  },
  {
    name: "已作废",
    value: -1,
  },
]);
const getDict = () => {
  dictDataList({
    dictType: "stocktake_type",
  }).then((res) => {
    options.value[1].options = res.map((btn) => {
      return {
        name: btn.dictLabel,
        value: btn.dictValue,
        id: btn.id,
      };
    });
  });
  getWmsInvWorkhouseList().then((res) => {
    options.value[2].options = res.map((btn) => {
      return {
        name: btn.workhouseName,
        value: btn.id,
        id: btn.id,
      };
    });
  });
};
getDict();
const keyword = ref("");
const searchParams = ref({}); //筛选
const currentState = ref(""); // tab状态
const handelSubmit = (data) => {
  let obj = {};
  for (let name in data) {
    if (name === "createTime") {
      const time = data[name];
      if (time && time.length !== 0) {
        obj.stocktakeDateStart = new Date(time[0]).getTime();
        obj.stocktakeDateEnd = new Date(time[time.length - 1]).getTime();
      }
    } else if (data[name] !== undefined) {
      obj[name] = data[name];
    }
  }
  searchParams.value = obj;
  resetList();
};
const handleChange = ({ value }) => {
  currentState.value = value;
  resetList();
};

const getList = async (item) => {
  const res = await countOrderList({
    ...item,
    stocktakeCode: keyword.value,
    ...searchParams.value,
    billState: currentState.value,
  });
  return res;
};
const { orderList, getMore, resetList } = useList(getList);

// 作废
const handleCancel = async (item) => {
  uni.showModal({
    editable: true,
    placeholderText: "请输入作废理由",
    success: async (res) => {
      if (res.confirm) {
        await countOrderCancel({
          id: item.id,
          remark: res.content,
        });
        resetList();
      }
    },
  });
};
// 审核
const handleCheck = async (item) => {
  uni.showModal({
    editable: true,
    placeholderText: "请输入审核意见",
    success: async (res) => {
      console.log(res);
      if (res.confirm) {
        await countOrderCheck({
          id: item.id,
          remark: res.content,
        });
        resetList();
      }
    },
  });
};
const goToAdd = () => {
  uni.navigateTo({
    url: "/pages/orderList/count/countListEdit",
  });
};
const goToDetail = (item) => {
  uni.navigateTo({
    url: "/pages/orderList/count/countListDetail?id=" + item.id,
  });
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.lineOne {
  display: flex;
  align-items: center;
  height: 45px;
  justify-content: space-between;
  padding: 0 12px;
  background-color: #fff;

  .search {
    flex: 1;
    margin-right: 6px;
  }
}

.tabs {
  background-color: #fff;
}

.list {
  padding: 0 15px;

  .u-list-item {
    margin-top: 10px;

    &:last-child {
      margin-bottom: 10px;
    }
  }
}

.img {
  position: fixed;
  right: 17px;
  bottom: 108px;

  .icon {
    display: block;
    height: 54px;
    width: 54px;
  }
}
</style>
